<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible = true">
      新增放映厅
    </el-button>

    <!-- 分割线 -->
    <el-divider content-position="left">放映厅列表</el-divider>

    <!-- 表格 -->
    <el-table :data="rooms">
      <el-table-column align="center" label="放映厅名称" prop="room_name"></el-table-column>
      <el-table-column align="center" label="放映厅类型" prop="room_type"></el-table-column>
      <el-table-column align="center" width="200px" label="放映厅座位数">
        <template slot-scope="scope">
            <span v-if="scope.row.room_size"> 
                {{scope.row.room_size}} 个座位
            </span>
            <span v-else>[暂未配置座位模板]</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="230px" label="操作">
        <template slot-scope="scope">
          <el-button 
            @click="$router.push(`/home/showingon-plan-list/${scope.row.id}`)"
            size="small" type="primary" circle icon="el-icon-view"></el-button>
          <el-button 
            @click="$router.push(`/home/showingon-plan-add/${scope.row.id}`)"
            size="small" type="success" circle icon="el-icon-plus"></el-button>
          <el-button 
            @click="$router.push(`/home/seat-template/${scope.row.id}`)"
            size="small" type="warning" circle icon="el-icon-menu"></el-button>
          <el-button size="small" type="danger" circle icon="el-icon-delete"></el-button>     
        </template>
      </el-table-column>
    </el-table>

    <!-- 脱离了默认文档流的对话框组件 -->
    <el-dialog title="添加放映厅" :visible.sync="dialogFormVisible">
      <el-form 
        ref="form"
        style="margin-right: 50px" 
        :model="form" :rules="rules" label-width="100px">
        <el-form-item label="放映厅名称" prop="room_name">
          <el-input v-model="form.room_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="放映厅类型" prop="room_type">
          <el-select
            style="width: 100%"
            v-model="form.room_type"
            placeholder="请选择放映厅类型"
          >
            <el-option 
                v-for="item in types" :key="item.id"
                :value="item.type_name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button 
            type="primary" 
            @click="onSubmit">
            确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from '@/http';
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        movie_cinema_id: this.$route.params.cinemaId,
        room_name: "",
        room_type: "",
      },
      rules: {
        movie_cinema_id: [
            {required:true, message:'必填', trigger:"blur"}],
        room_name:[{required:true, message:'必填', trigger:'blur'}],
        room_type:[{required:true, message:'必选', trigger:'change'}],
      },
      types: [], // 描述放映厅类型列表
      rooms: [], // 存储放映厅列表
    };
  },

  methods: {

    /** 查询当前电影院下的所有放映厅列表 */
    list(){
        httpApi.CinemaRoomApi.list({
            cinema_id: this.form.movie_cinema_id
        }).then(res=>{
            console.log('查询当前影院下的所有放映厅', res)
            this.rooms = res.data.data
        })
    },

    onSubmit() {
      this.$refs['form'].validate(valid=>{
        if(valid){
            console.log(this.form)
            httpApi.CinemaRoomApi.add(this.form).then(res=>{
                if(res.data.code=200){ // 添加成功
                    // 提示恭喜
                    this.$message({
                        message: '放映厅添加成功',
                        type: 'success'
                    })
                    // 隐藏自定义对话框
                    this.dialogFormVisible = false
                    this.$refs['form'].resetFields()
                    // 重新加载列表
                    this.list()
                }
            })
        }
      })
    }
  },

  mounted(){
    // 加载所有放映厅类型列表
    httpApi.CinemaRoomApi.queryAllTypes().then(res=>{
        console.log('放映厅类型', res)
        this.types = res.data.data
    })

    // 加载放映厅列表
    this.list()
  }
};
</script>

<style lang="scss" scoped></style>
